<template>
  <div>
    <MyLogo></MyLogo>
    <div
      class="detail"
      :style="{ background: detailData.backgroundColor }"
      v-if="detailData.img"
    >
      <p class="title">猫眼电影 > {{ detailData.nm }}</p>
      <div class="movie-info-top">
        <div class="movie-cover">
          <img :src="detailData.img | formatImg" alt="" />
        </div>
        <div class="movie-desc">
          <div class="movie-desc-top">
            <div class="movie-name">
              <h1>{{ detailData.nm }}</h1>
            </div>
            <div class="movie-en-name">{{ detailData.enm }}</div>
            <div class="movie-type">
              <span class="movie-cat">剧情:</span>
              <span class="movie-tag">
                <img
                  src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/movie-tag-2DIMAX.png"
                  alt=""
                />
              </span>
            </div>
            <div class="movie-star">{{ detailData.star }}</div>
            <div class="movie-actors">
              {{ detailData.cat }}
            </div>
            <div class="movie-show-time">{{ detailData.pubDesc }}</div>
          </div>
          <div class="btns">
            <button>
              <img
                src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/want-to-watch.png"
                alt=""
              />
              <span>想看</span>
            </button>
            <button>
              <img
                src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/star.png"
                alt=""
              />
              <span>看过</span>
            </button>
          </div>
        </div>
      </div>

      <div class="score-now">
        <div class="score-top">
          <div class="left">
            <img
              src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/logo.png"
              alt=""
            />
            <span>猫眼购票评分</span>
          </div>
          <div class="right">
            <div class="score-wish">{{ detailData.wish }} 人想看</div>
            <div class="score-watched">{{ detailData.watched }} 人看过</div>
          </div>
        </div>
        <div class="score-middle">
          <div class="left">
            <span>{{ detailData.sc }}</span>
            <div class="comment">{{ detailData.snum }} 人评</div>
          </div>
          <div class="right">
            <Score
              v-for="(item, index) in detailData.distributions"
              :key="index"
              :num="3 - index"
              :score="item.proportion"
              class="grade"
            />
          </div>
        </div>
      </div>

      <p class="comment_num">{{ animatedNumber }}</p>

      <!-- 从当前详情页跳转至一个动态参数(即id值不一样的)详情页 -->
      <button @click="toOtherDetail">猜你喜欢</button>
    </div>

    <div v-else>数据加载中，请您稍等片刻...</div>

    <Ticket></Ticket>
  </div>
</template>

<script>
import Score from "../components/detail/Score.vue";
import MyLogo from "../components/Home/MyLogo.vue";
import Ticket from "../components/detail/Ticket.vue";
// import { getDetailDataApi } from "../utils/api";

import { mapState, mapActions } from "vuex";

import gsap from "gsap";

export default {
  props: ["id"],
  data() {
    return {
      // detailData: [],
      number: 0,
      updateNumber: 0,
    };
  },
  components: {
    Score,
    MyLogo,
    Ticket,
  },

  mounted() {
    // this.getData();
    this.getDetailDataAsync({
      id: this.id,
    }).then(() => {
      this.number = this.detailData.wish;
    });
    console.log(this.detailData);
  },

  methods: {
    ...mapActions(["getDetailDataAsync"]),
    // async getData(id) {
    //   const res = await getDetailDataApi({
    //     id: id || this.id,
    //   });
    //   console.log(res);
    //   this.detailData = res.result;
    //   this.number = res.result.wish;
    // },

    toOtherDetail() {
      // 动态路由形式跳转页面，由于组件实例调用的是同一个只是数据不同，所以原来的组件实例会被复用，不会出现销毁再创建(两个路由渲染同一个组件，复用效率更高效)
      // 由于出现复用，不会销毁再创建，所以钩子函数中的mounted钩子函数不会被触发，则数据请求就不会发生，页面数据也就不会改变，且数据不会响应式的改变
      // 这里有两种方式监听数据改变: 1、通过watch属性监听值的变化再触发数据请求 2、通过beforeRouteUpdate这个组件守卫去获取最新值然后作为参数传递并发数据请求
      this.$router.push("/detail/1197684");
    },
  },
  filters: {
    formatImg(val) {
      // 可选链操作符 ?. 判断?.前面对象是否存在如果不存在则不执行后面的链式操作，如果存在则执行后面的链式操作
      return val?.replace("/w.h", "");
    },
  },
  computed: {
    // ...mapState(["detailData"]),
    ...mapState({
      detailData: (state) => state.detail.detailData,
    }),

    animatedNumber: function () {
      // 计算属性管理udateNumber数据，让其只显示整数位数的值的变化，不添加则会显示后面小数位的变化过程
      return this.updateNumber.toFixed(0);
    },
  },
  watch: {
    number: function (newValue) {
      gsap.to(this.$data, { duration: 1, updateNumber: newValue });
    },
    // $route() {
    //   console.log(this.id);
    //   this.getData();
    // },
  },
  async beforeRouteEnter(to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
    // console.log("beforeRouteEnter");

    // 使用to来获取url参数
    // const res = await getDetailDataApi({
    //   id: to.params.id,
    // });
    // next里面可以使用函数，默认参数是组件实例
    // next((vm) => (vm.detailData = res.result));
    next();
  },
  beforeRouteUpdate(to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
    console.log(this.id); // 原先id的值，未进行跳转，next时才发生，所以通过这种方式无法获取最新的id值
    this.getData(to.params.id); // 这里可以通过to参数(要跳转到的路由的路由信息获取跳转路由的动态参数id值)
    next();
  },
  beforeRouteLeave(to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
    next();
  },
};
</script>

<style lang="less" scoped>
.detail {
  width: 100%;
  height: 500px;
  padding: 21px 16px;

  .title {
    margin-bottom: 0.3rem;
    color: #ccc;
    font-size: 14px;
  }

  .grade {
    margin-top: 5px;
  }

  .comment_num {
    color: #fff;
  }
}

.movie-cover img {
  width: 100px;
  height: 150px;
}

.movie-info-top {
  display: flex;
  margin-top: 15px;

  .movie-desc {
    flex: 1;
    margin-left: 12px;

    .movie-name h1 {
      font-size: 20px;
      color: #fff;
      line-height: 30px;
    }

    .movie-en-name {
      font-size: 12px;
      opacity: 0.6;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      color: #fff;
      line-height: 18px;
    }

    .movie-type {
      font-size: 12px;
      display: flex;
      align-items: center;
      color: #fff;
      line-height: 18px;
    }

    .movie-cat {
      opacity: 0.6;
    }

    .movie-tag {
      border-radius: 2px;
      margin-left: 4px;
      vertical-align: text-bottom;
      display: flex;
      align-items: center;

      img {
        height: 14px;
      }
    }

    .movie-actors,
    .movie-star {
      opacity: 0.6;
      font-size: 12px;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      margin: 0;
      color: #fff;
      line-height: 18px;
    }

    .movie-show-time {
      opacity: 0.6;
      font-size: 12px;
      color: #fff;
      line-height: 18px;
    }

    .btns {
      display: flex;
      justify-content: space-between;
      button {
        display: flex;
        justify-content: center;
        align-items: center;
        background: hsla(0, 0%, 100%, 0.35);
        box-shadow: 0 1px 4px 0 rgb(0 0 0 / 10%);
        border-radius: 4px;
        font-size: 14px;
        width: 47.61904762%;
        height: 30px;
        color: #fff;
        border: none;
        outline: none;
      }

      img {
        width: 14px;
        height: 14px;
        margin-right: 6px;
      }
    }
  }
}

.score-now {
  background-color: rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 0.06rem 0 hsl(0deg 0% 100% / 3%);
  border-radius: 6px;
  margin-top: 15px;
  padding: 8px 12px;
  height: 90px;
  box-sizing: border-box;

  .score-top {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .left {
      font-size: 12px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      font-weight: 500;
      font-family: PingFangSC-Medium;
      color: #fff;

      img {
        width: 14px;
        height: 14px;
        margin-right: 4px;
      }
    }

    .right {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      font-size: 10px;
      color: #fff;

      .score-watched,
      .score-wish {
        opacity: 0.6;
        font-size: 11px;
      }

      .score-watched {
        margin-left: 9px;
      }
    }
  }

  .score-middle {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 0;

    .left {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin-right: 10px;
      span {
        font-weight: 600;
        font-family: PingFangSC-Semibold;
        font-size: 22px;
        color: #ffb400;
        line-height: 30px;
      }

      .comment {
        font-weight: 400;
        opacity: 0.6;
        font-family: PingFangSC-Regular;
        font-size: 10px;
        display: flex;
        word-break: keep-all;
        color: #fff;
      }
    }
  }
}
</style>
